<template>
  <view class="page-bg">
    <!-- 企业信息卡 -->
    <view class="company-card">
      <view class="company-title">
        {{commanyInfo.enterpriseName}}
        <view class="quota-box">
          <view class="quota-label">剩余名额：</view>
          <view class="quota-value">{{ members.length }}/10</view>
        </view>
      </view>
      <view class="company-code">统一社会信用代码：{{commanyInfo.enterpriseCode}}</view>
      <view class="quota-bar-wrap">
        <view class="quota-used">已使用{{ members.length }}个名额</view>
        <progress :percent="percent" :border-radius="10" stroke-width="12" active color="#3a7afe" backgroundColor="#e5e6eb" />
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="btn-row"> 
      <button class="main-btn" @click="handleQrcode()">
        <u-icon name="scan" color="#fff" size="40" />
        生成员工入会码
      </button>
      <button class="sub-btn" @click="onRefresh">
        <u-icon name="reload" color="#3a7afe" size="40" />
        刷新员工列表
      </button>
    </view>

    <!-- 入会说明 -->
    <view class="guide-card">
      <view class="guide-title">
        <u-icon name="info-circle-fill" color="#409eff" size="28" style="margin-right:12rpx;" />
        员工入会说明
      </view>
      <view class="guide-list">
        <view>• 每个企业最多可推荐10名员工加入协会，享受会员权益</view>
        <view>• 生成的入会码有效期为7天，过期需重新生成</view>
        <view>• 员工通过入会码注册后将自动归属到本企业名下</view>
        <view>• 已入会员工可在本页查看，如需移除请点击“删除”按钮</view>
        <view>• 被删除的员工将失去协会会员资格，且占用的名额将被释放</view>
      </view>
    </view>

    <!-- 已入会员工列表 -->
    <view class="member-list-card">
      <view class="member-list-header">
        <view class="member-list-title">已入会员工列表</view>
        <view class="member-list-count">共{{ members.length }}名员工</view>
      </view>
      <view v-for="(item, idx) in members" :key="item.id" class="member-item">
        <image class="member-avatar" :src="imgUrl+item.avatar" />
        <view class="member-info">
          <view class="member-name">{{ item.empName }}</view>
          <view class="member-date">入会时间：{{ item.createTime }}</view>
        </view>
        <view class="member-status">正常</view>
        <view class="member-delete" v-if="item.isBoss==1 " @click="onDelete(item,idx)">删除</view>
      </view>
    </view>

    <!-- 入会码二维码弹窗 -->
    <up-popup :show="showQrcode" mode="center" :round="10"  :mask-close-able="true">
      <view class="qrcode-modal">
        <view class="qrcode-title">员工入会码</view>
        <view class="qrcode-img-wrap">
          <!-- <up-qrcode cid="ex1" :size="320" val="uview-plus"></up-qrcode> -->
          <view>{{ qrcodeText }}</view>
        </view>
        <view class="qrcode-tip">点击复制按钮复制入会码</view>
        <view class="qrcode-tip">有效期7天，员工扫码即可加入本企业</view>
        <button class="close-btn" @click="showQrcode = false">关闭</button>
        <button class="close-btn" @click="copyQrcode()">复制</button>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue'
import {imgUrl} from '@/config/index'
import {getEmployeeList,getEnterpriseInfo,getQrCode,deleteEmployee} from '@/api/index'

let commanyInfo = ref({})
onMounted(() => {
  getEmployeeList().then(res=>{
    console.log(res);
    members.value = res.data
  }) 
  getEnterpriseInfo().then(res=>{
    if(res.code==200){
      console.log(res);
      commanyInfo.value = res.data
    }

  })
})

const percent = computed(() => Math.round((members.value.length / 10) * 100))

const showQrcode = ref(false)
const qrcodeText = ref('')
const handleQrcode=()=>{
  getQrCode().then(res=>{
    console.log(res);
    qrcodeText.value = res.msg
    showQrcode.value = true
  })
}
const copyQrcode = () => { 
  uni.setClipboardData({
    data: qrcodeText.value,
    success: function () {
      showQrcode.value = false
      uni.showToast({ title: '复制成功', icon: 'success' })
    }
  })
}

const members = ref([])

const onDelete = (item,idx) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该员工吗？',
    success: (res) => {
      if (res.confirm) {
        deleteEmployee({id:item.id}).then(res=>{
          if(res.code==200){
            members.value.splice(idx, 1)
            uni.showToast({ title: '已删除', icon: 'success' })
          }else{
            uni.showToast({ title: res.msg, icon: 'none' })

          }
        })
        // members.value.splice(idx, 1)
        // used.value--
        // uni.showToast({ title: '已删除', icon: 'success' })
      }
    }
  })
}

const onRefresh = () => {
  getEmployeeList().then(res=>{
    console.log(res);
    members.value = res.data
    uni.showToast({ title: '已刷新', icon: 'success' })
  }) 
}
</script>

<style scoped>
.page-bg {
  background: #f7f8fa;
  min-height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  padding-bottom: 20rpx;
}
.company-card {
  background: #fff;
  border-radius: 28rpx;
  margin: 36rpx 24rpx 0 24rpx;
  padding: 36rpx 36rpx 20rpx 36rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
}
.company-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.company-code {
  color: #b0b3bb;
  font-size: 28rpx;
  margin-top: 12rpx;
}
.quota-box {
  background: #e6f0ff;
  color: #3a7afe;
  font-size: 26rpx;
  border-radius: 24rpx;
  padding: 6rpx 28rpx;
  display: flex;
  align-items: center;
  margin-left: 18rpx;
}
.quota-label {
  font-size: 24rpx;
  color: #6a7fa7;
}
.quota-value {
  font-size: 36rpx;
  font-weight: bold;
  margin-left: 8rpx;
}
.quota-bar-wrap {
  margin-top: 18rpx;
}
.quota-used {
  font-size: 24rpx;
  color: #3a7afe;
  margin-bottom: 4rpx;
}
.btn-row {
  display: flex;
  gap: 24rpx;
  margin: 36rpx 24rpx 0 24rpx;
}
.main-btn {
  flex: 1;
  background: linear-gradient(90deg,#2196f3 0%,#2979ff 100%);
  color: #fff;
  border: none;
  border-radius: 24rpx;
  font-size: 32rpx;
  font-weight: bold;
  padding: 36rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}
.sub-btn {
  flex: 1;
  background: #fff;
  color: #3a7afe;
  border: 2rpx solid #e6f0ff;
  border-radius: 24rpx;
  font-size: 32rpx;
  font-weight: bold;
  padding: 36rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}
.guide-card {
  background: #f4f8ff;
  border-radius: 28rpx;
  margin: 36rpx 24rpx 0 24rpx;
  padding: 28rpx 28rpx 20rpx 28rpx;
}
.guide-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #222;
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.guide-list view {
  color: #4a4a4a;
  font-size: 26rpx;
  margin-bottom: 8rpx;
}
.member-list-card {
  background: #fff;
  border-radius: 28rpx;
  margin: 36rpx 24rpx 0 24rpx;
  padding: 24rpx 0 8rpx 0;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
}
.member-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx 12rpx 32rpx;
}
.member-list-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #222;
}
.member-list-count {
  color: #888;
  font-size: 26rpx;
}
.member-item {
  display: flex;
  align-items: center;
  background: #f7f8fa;
  border-radius: 20rpx;
  margin: 0 24rpx 24rpx 24rpx;
  padding: 18rpx 24rpx;
}
.member-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 18rpx;
  background: #e5e6eb;
}
.member-info {
  flex: 1;
}
.member-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #222;
}
.member-date {
  font-size: 24rpx;
  color: #888;
  margin-top: 4rpx;
}
.member-status {
  color: #19be6b;
  background: #e6f9ea;
  border-radius: 12rpx;
  font-size: 26rpx;
  padding: 4rpx 18rpx;
  margin-right: 18rpx;
}
.member-delete {
  color: #fa5151;
  font-size: 28rpx;
  margin-left: 8rpx;
}
.qrcode-modal {
  background: #fff;
  border-radius: 24rpx;
  padding: 48rpx 32rpx 32rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qrcode-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
}
.qrcode-img-wrap {
  margin-bottom: 18rpx;
}
.qrcode-tip {
  color: #888;
  font-size: 24rpx;
  margin-bottom: 24rpx;
}
.close-btn {
  width: 100%;
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 16rpx;
  font-size: 30rpx;
  /* padding: 18rpx 0; */
  font-weight: bold;
  margin-top: 12rpx;
}
</style>